<template>
	<div class="mine-my-team-wrap">
		<van-nav-bar title="我的团队" left-arrow fixed @click-left="onClickLeft" />
		<div class="team-info" :style="{ backgroundImage: 'url(' + inviter_info.background + ')' }">
			<div class="team-title">我的身份</div>
			<div class="team-desc">站长、推荐人的身份有权限设置创客</div>
			<div class="team-level">{{ inviter_info.name }}</div>
		</div>
		<!--  v-if="inviter.inviter_show == 1" -->
		<div class="team-invite" v-if="inviter_show == 1">
			<div class="team-invite-title"><img src="../../images/mine/icon_shuju.png" alt="">邀请我的人</div>
			<div class="team-invite-desc">
				<img v-if="inviter.avatar_url" class="team-invite-head" :src="inviter.avatar_url" alt="">
				<img v-else class="team-invite-head" src="../../images/mine/head.png">
				<div class="team-invite-name">
					<div>{{ inviter.nickname }}
						<div class="item_info_account">
							{{!showEye?inviter.account.replace(/(\d{3})\d{4}(\d{3})/, '$1****$2'): inviter.account}}
							<img @click="handleEye" v-if="showEye" src="../../images/eye.png" alt="">
							<img @click="handleEye"  v-else src="../../images/eye1.png" alt="">
						</div>
					</div>
					<div class="item_last">
						邀请码: {{ inviter.invite_code}}
					</div>
				</div>
			</div>
		</div>
		<!-- <div class="team-invite" v-if="inviter.inviter_show == 1">
			<div class="team-invite-title">我的推荐人</div>
			<div class="team-invite-desc">
				<img v-if="inviter_info.avatar_url" class="team-invite-head" :src="inviter_info.avatar_url" alt="">
				<img v-else class="team-invite-head" src="../../images/mine/head.png">
				<div class="team-invite-name">{{ inviter_info.nickname }}</div>
			</div>
		</div>

		<div class="profit_core" v-if="inviter.level_info && inviter.level_info.items.length > 0">
			<div class="profit_team">
				<div class="profit_team_left">
					<div v-for="(item, index) in inviter.level_info.items" :key="index" class="profit_team_left_item">
						<div class="profit_team_left_title">{{ item.title }}</div>
						<van-progress :percentage="calculatePercentage(item.req_val, item.now_val)" stroke-width="6px"
							pivot-text="" pivot-color="#7232dd" color="linear-gradient(to left, #FFC100, #FFFC82)" />
						<div class="profit_team_left_title right">{{ item.desc }}</div>
					</div>
				</div>
				<div class="profit_team_right">
					<img :src="inviter.level_info.icon" alt="" />
					<div>{{ inviter.level_info.name }}</div>
				</div>
			</div>

			<div class="profit_team_tip">{{ inviter.level_info.tip_msg }}</div>
		</div> -->

		<!-- 团队粉丝 -->
		<!-- <div v-if="inviter.statistics" class="team-fensi" @click="handleToTeam()">
			<div class="team-fensi-tltle">团队粉丝</div>
			<div class="team-fensi-count">{{ inviter.statistics.count }}</div>
			<div class="team-fensi-ul">
				<div @click.stop="handleToTeam('yesterday')" class="team-fensi-li">
					<div class="team-fensi-val">{{ inviter.statistics.days_count1 }}</div>
					<div class="team-fensi-label">昨日新增</div>
				</div>
				<div @click.stop="handleToTeam('week')" class="team-fensi-li li-center">
					<div class="team-fensi-val">{{ inviter.statistics.days_count7 }}</div>
					<div class="team-fensi-label">近7天</div>
				</div>
				<div @click.stop="handleToTeam('month')" class="team-fensi-li">
					<div class="team-fensi-val">{{ inviter.statistics.days_count30 }}</div>
					<div class="team-fensi-label">近30天</div>
				</div>
			</div>

			<div @click.stop="handleToTeam('today')" class="today-btn">今日新增 {{ inviter.statistics.today_count }}</div>

		</div> -->

		<!-- <div class="team-static" >
			<div class="team-static-title" >
				<img class="team-static-title-icon" src="../../images/mine/icon_shuju.png" />
				<div class="team-static-title-text" >团队数据汇总</div>
			</div>
			<div class="team-static-ul" >
				<div class="team-static-li" >
					<div class="team-static-li-val" >{{ inviter.statistics.tier_count1 }}</div>
					<div class="team-static-li-label" >直属粉丝</div>
				</div>
				<div class="team-static-li" >
					<div class="team-static-li-val" >{{ inviter.statistics.tier_count2 }}</div>
					<div class="team-static-li-label" >二代粉丝</div>
				</div>
				<div class="team-static-li" >
					<div class="team-static-li-val" >{{ inviter.statistics.tier_count_other }}</div>
					<div class="team-static-li-label" >二代后粉丝</div>
				</div>
			</div>
		</div> -->




		<div class="profit_core_title">
			我的直推({{ total_count }}人)
			<!--   -->
			<div class="profit_btn" v-if="inviter_info.level > 1" @click="showSetp"><van-icon name="plus" />设置创客</div>
		</div>
		<div>
			<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
				<div class="team_list" v-for="(item, index) in fansList" :key="index">
					<div class="team_list_item">
						<img v-if="item.avatar_url" :src="item.avatar_url" alt="" />
						<img v-else src="../../images/mine/head.png" alt="" />
						<div class="team_list_item_info">
							<div class="team_info_acc">
								<!-- <span></span> -->
								<div>{{ item.nickname }}</div>
								<div class="item_info_account">
									{{ !showEye?item.account.replace(/(\d{3})\d{4}(\d{3})/, '$1****$2'):item.account }}
									<img @click="handleEye" v-if="showEye" src="../../images/eye.png" alt="">
									<img @click="handleEye" v-else src="../../images/eye1.png" alt="">
								</div>
							</div>
							<div class="item_last">
								消费金额：{{ item.consume_total }}&nbsp;&nbsp;团队人数：{{
									item.team_count
								}}
							</div>
						</div>
						<!-- <div class="team_list_item_level">经理</div> -->
						<img v-if="item.level_icon" class="team_list_item_level" :src="item.level_icon || ''" alt="" />
						<div v-else class="team_list_item_level"></div>
					</div>
				</div>
			</van-list>
		</div>
		<van-popup v-model="show" position="center" :style="{ height: '6.88rem', width: '80%' }" round>
			<div class="setp">
				<div class="setp_title">设置创客</div>
				<div class="setp_input">
					<input type="text" @keyup.enter="onSearch" @blur="onSearch" v-model="keyword"
						placeholder="请输入用户名/ID进行搜索" />
					<img src="../../images/icon_search.png" alt="">
				</div>
				<div class="setp_list" v-if="teamsList.length > 0">
					<div v-for="item, index in teamsList" :key="index" class="setp_item">
						<div class="setp_item_left" v-if="item.avatar_url">
							<img :src="item.avatar_url" alt="">{{ item.nickname }}({{ item.account }})
						</div>
						<div class="setp_item_left" v-else>
							<img src="../../images/mine/head.png" alt="">{{ item.nickname }}({{ item.account }})
						</div>
						<div class="setp_item_right" @click="selectOption(item.uid)">
							<img v-if="selectedItems.includes(item.uid)" src="../../images/default-tag-icon.png" alt="">
							<img v-else src="../../images/default-circle.png" alt="">
						</div>
					</div>
				</div>
				<div style="color: #666;text-align: center;font-size: .24rem;margin-top: 1rem;" v-else>
					没有更多了
				</div>
				<div class="setp_btn">
					<div class="setp_qx" @click="showClone">取消</div>
					<div class="setp_qd" @click="submit">确定</div>
				</div>
			</div>

		</van-popup>

	</div>
	<!-- </div> -->
</template>
<script>
import {
	TEAM_INFO,
	FANS_LIST,
	USER_SET_CREATOR
} from "@/api/mine";
export default {
	data() {
		return {
			finished: false,
			loading: false,
			inviter_info: {},
			inviter_show:null,
			page: 1,
			pageSize: 20,
			fansList: [],
			total_count: 0,
			currentValidUsers: 2.2, // 当前有效用户数量（单位：万）
			totalValidUsers: 5, // 总有效用户数量（单位：万）
			currentValidTeam: 2.3,
			totalValidTeam: 6,
			inviter: {},
			show: false,
			selectedItems: [],
			keyword: '',
			teamsList: [],
			showEye: false
		};
	},
	mounted() {
		window.scrollTo(0, 0);
		this.$http(TEAM_INFO).then((res) => {
			// this.inviter = res.data;
			this.inviter_info = res.data.level_info;
			this.inviter=res.data.inviter_info
			this.inviter_show=res.data.inviter_show
		});
	},
	methods: {
		onClickLeft() {
			this.$router.back();
		},
		handleEye(){
			this.showEye = !this.showEye

		},
		showSetp() {
			this.show = true
			this.handleFens()
		},
		selectOption(index) {
			const idx = this.selectedItems.indexOf(index);
			if (idx === -1) {
				// 如果当前选项未被选中，则添加到数组
				this.selectedItems.push(index);
			} else {
				// 如果当前选项已被选中，则移除
				this.selectedItems.splice(idx, 1);
			}
			console.log(this.selectedItems);

		},
		onSearch() {
			this.selectedItems = []
			this.handleFens()
		},
		showClone() {
			this.show = false;
			this.keyword = ''
			this.selectedItems = []
		},
		ajaxGoodList() {
			this.page = 1
			this.fansList = []
			this.onLoad()
			this.handleFens()
		},
		submit() {
			// console.log(this.selectedItems);
			if (this.selectedItems.length == 0) {
				return this.$toast('请选择')
			}
			this.$http.post(USER_SET_CREATOR, {
				ids: this.selectedItems
			}).then(res => {
				this.$toast.success('设置成功')
				this.show = false;
				this.keyword = ''
				this.selectedItems = []
				this.ajaxGoodList()
			})
		},
		// isSelected(item) {
		// 	return this.selectedItems.includes(item);
		// },
		calculatePercentage(reqVal, nowVal) {
			if (nowVal >= reqVal) {
				return 100; // 如果当前值大于或等于最高值，返回 100%
			}
			// 计算进度百分比
			const progress = (nowVal / reqVal) * 100; // 这里 nowVal 是当前值，reqVal 是最高值
			// 确保进度在 0 到 100 之间
			return Math.max(0, Math.min(100, progress));
		},
		// 列表
		handleToTeam(name) {
			this.$router.push({
				name: 'teamList',
				query: {
					name: name || ''
				}
			})
		},
		handleFens() {
			let params = {
				page_num: 1,
				page_size: 10,
				keyword: this.keyword,
				tier_level: 1,
				level: 0
			}
			this.$http.get(FANS_LIST, {
				params: params
			}).then((res) => {
				this.teamsList = res.data.list
			})
		},

		onLoad() {
			let params = {};
			params["page_num"] = this.page;
			params["page_size"] = this.pageSize;
			params['tier_level'] = 1;
			// params['status'] = this.active;
			this.$http.get(FANS_LIST, {
				params: params
			}).then((res) => {
				const {
					list
				} = res.data;
				this.total_count = res.data.pages.total_count;
				if (list && list.length) {
					this.page++;
					this.fansList = this.fansList.concat(list);

					// 加载状态结束
					this.loading = false;
					if (list.length < this.pageSize) {
						this.finished = true;
					}
				} else {
					this.finished = true;
				}
			});
		},
	},
};
</script>
<style lang="scss" scoped>
.mine-my-team-wrap {
	min-height: 100vh;
	padding-top: 58px;
	padding-bottom: 1rem;
	background-color: #f4f4f4;
	box-sizing: border-box;

	::v-deep .van-nav-bar .van-icon {
		color: #333333;
	}

	::v-deep .van-nav-bar__arrow {
		font-size: 20px;
	}

	::v-deep .van-hairline--bottom::after {
		display: none;
	}

	.setp {
		width: 95%;
		margin: 0 auto;

		.setp_title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: .32rem;
			color: #333333;
			// line-height: 22px;
			text-align: center;
			font-style: normal;
			padding-top: .32rem;
		}

		.setp_input {
			width: 100%;
			height: .64rem;
			display: flex;
			align-items: center;
			position: relative;
			background: #F2F4F5;
			border-radius: .42rem;
			margin-top: .34rem;
			box-sizing: border-box;

			input {
				width: 100%;
				height: 100%;
				background-color: #F2F4F5;
				border: none;
				border-radius: .42rem;
				font-size: .28rem;
				text-indent: .3rem;
			}

			img {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 0.2rem;
				width: .32rem;
				height: .32rem;
			}
		}

		.setp_btn {
			width: 100%;
			height: 1rem;
			position: fixed;
			left: 0;
			bottom: 0.3rem;
			background: #fff;
			box-sizing: border-box;
			display: flex;
			justify-content: space-around;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			line-height: .8rem;
			text-align: center;
			font-style: normal;

			.setp_qx {
				width: 40%;
				height: .8rem;
				background: #FFFFFF;
				border-radius: .4rem;
				border: 1px solid #E3E3E3;
				font-size: .32rem;
				color: #333333;
			}

			.setp_qd {
				width: 40%;
				height: .8rem;
				background: linear-gradient(90deg, #4A89EC 0%, #1261E2 100%);
				border-radius: .4rem;
				// border: 1px solid #E3E3E3;
				font-size: .32rem;
				color: #FFFFFF;
			}
		}
	}

	.setp_list {
		height: 3.3rem;
		overflow: auto;
		margin-top: .4rem;

		.setp_item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: .24rem;

			.setp_item_left {
				display: flex;
				align-items: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: .24rem;
				color: #333333;
				// line-height: 17px;
				text-align: left;
				font-style: normal;

				img {
					width: .56rem;
					margin-right: .16rem;
				}
			}

			.setp_item_right {
				img {
					width: .32rem;
				}
			}
		}
	}


	.profit_core_title {
		width: 95%;
		margin: 0 auto;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: .28rem;
		color: #333333;
		// line-height: 18px;
		text-align: left;
		font-style: normal;
		padding-top: .32rem;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.profit_btn {
			// width: 94px;
			height: .6rem;
			background: #FFFFFF;
			border-radius: .3rem;
			border: 1px solid #1D69E4;
			line-height: .6rem;
			padding: 0 .22rem;
			font-size: .28rem;
			color: #1D69E4;
		}
	}

	.team-info {
		width: 95%;
		height: 2.8rem;
		margin: 0 auto;
		background: url('../../images/mine/level_bg.png') no-repeat center;
		background-size: cover;
		font-family: PingFangSC, PingFang SC;
		color: #FFFFFF;
		font-style: normal;
		padding: 0 .48rem;
		box-sizing: border-box;
		padding-top: .6rem;
		position: relative;

		.team-title {
			font-weight: 500;
			font-size: .36rem;
		}

		.team-desc {
			font-weight: 400;
			font-size: .24rem;
			padding-top: .8rem;
		}

		.team-level {
			position: absolute;
			right: 1.1rem;
			bottom: 0.32rem;
			font-weight: 500;
			font-size: .28rem;
		}
	}

	.team-invite {
		width: 7.02rem;
		// height: 1.68rem;
		// padding: 0.24rem 0.32rem;
		margin: auto;
		margin-bottom: 0.2rem;
		border-radius: 0.16rem;
		box-sizing: border-box;
		background-color: #FFFFFF;
		margin-top: .28rem;
		padding-bottom: .28rem;
		.team-invite-title {
			background: #f4f7fd;
			border-radius: 8px 8px 0px 0px;
			padding: .2rem .28rem;
			box-sizing: border-box;
			// opacity: 0.06;
			// height: 0.4rem;
			margin-bottom: 0.1rem;
			// line-height: 0.4rem;
			font-size: 0.28rem;
			font-weight: 500;
			color: #333333;
			display: flex;
			align-items: center;
			
			img {
				width: .32rem;
				height: .32rem;
				margin-right: .16rem;
			}
		}

		.team-invite-desc {
			display: flex;
			align-items: center;
			margin-top:.28rem ;
			.team-invite-head {
				width: 0.72rem;
				height: 0.72rem;
				margin-left: 0.14rem;
				margin-right: 0.18rem;
			}

			.team-invite-name {
				font-size: 0.28rem;
				color: #333333;
				div:first-child{
					display: flex;
					align-items: center;
					.item_info_account {
						margin: 0 .08rem;
						margin-left: .24rem;
						font-size: .26rem;
						color: #666666;
						img {
							width: .28rem;
							height: .28rem;
							margin-left: .1rem;
						}
					}
				}
				.item_last {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: .24rem;
					color: #999999;
					// line-height: 14px;
					text-align: left;
					font-style: normal;
					margin-top: .08rem;
				}

			}
		}
	}

	.profit_core {
		width: 7.02rem;
		margin: auto;
		margin-bottom: 0.2rem;
		padding: 0.2rem 0.28rem 0.32rem 0.32rem;
		background: linear-gradient(117deg, #F62B23 0%, #F26554 100%);
		border-radius: 0.16rem;
		box-sizing: border-box;

		.profit_team {
			display: flex;
			justify-content: space-between;

			.profit_team_left {
				width: 3.82rem;
				margin-top: 0.24rem;
				font-size: 0.24rem;
				color: #FFFFFF;

				.profit_team_left_item {
					margin-bottom: 0.24rem;
				}

				.profit_team_left_title {
					height: 0.34rem;
					font-weight: 400;
					line-height: 0.34rem;
					margin-bottom: 0.08rem;

					&.right {
						margin-top: 0.08rem;
						text-align: right;
					}
				}
			}

			.profit_team_right {
				img {
					display: block;
					height: 1.82rem;
				}

				div {
					height: 0.4rem;
					margin-top: 0.06rem;
					line-height: 0.4rem;
					font-weight: 500;
					font-size: 0.28rem;
					text-align: center;
					color: #FFFFFF;
				}
			}
		}

		.profit_team_tip {
			line-height: 0.34rem;
			font-weight: 400;
			font-size: 0.24rem;
			margin-top: 0.24rem;
			color: #FFFFFF;
			opacity: 0.8;
			white-space: pre-wrap;
		}
	}

	.team_list {
		width: 95%;
		margin: 0 auto;

		.team_list_item {
			display: flex;
			// justify-content: space-between;
			position: relative;
			padding: .3rem;
			background-color: #fff;
			border-radius: 8px;
			margin-top: .2rem;

			img {
				width: .76rem;
				height: .76rem;
				border-radius: .76rem;
			}

			.team_list_item_info {
				width:90%;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: .28rem;
				color: #333333;
				line-height: .4rem;
				// text-align: left;
				font-style: normal;
				margin-left: .2rem;
				.team_info_acc {
					display: flex;
					align-items: center;

					.item_info_account {
						margin: 0 .08rem;
						margin-left: .16rem;
						font-size: .26rem;
						color: #666666;
						display: flex;
						align-items: center;
						img {
							width: .28rem;
							height: .28rem;
							margin-left: .1rem;
							
						}
					}
				}

				.item_last {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: .24rem;
					color: #999999;
					// line-height: 14px;
					text-align: left;
					font-style: normal;
					// margin-top: .08rem;
				}
			}

			.team_list_item_level {
				width: 1.24rem;
				height: .46rem;
				// margin-top: .2rem;
				position: absolute;
				right: .2rem;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}

	.team-fensi {
		position: relative;
		width: 7.02rem;
		height: 2.84rem;
		padding: 0.3rem 0;
		margin: auto;
		margin-bottom: 0.2rem;
		color: #FFFFFF;
		background: url(../../images/mine/mine-team-bg.png) no-repeat center;
		background-size: cover !important;
		box-sizing: border-box;

		.today-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 0.52rem;
			right: 0.4rem;
			height: 0.6rem;
			padding: 0 0.24rem;
			font-size: 0.28rem;
			color: #333333;
			border-radius: 0.3rem;
			background-color: #FFFFFF;
		}

		.team-fensi-tltle {
			height: 0.4rem;
			margin-left: 0.48rem;
			margin-bottom: 0.08rem;
			line-height: 0.4rem;
			font-size: 0.28rem;
			font-weight: 400;
			color: #FFFFFF;
		}

		.team-fensi-count {
			height: 0.74rem;
			margin-left: 0.48rem;
			margin-bottom: 0.14rem;
			line-height: 0.74rem;
			font-weight: 500;
			font-size: 0.52rem;
			color: #FFFFFF;
		}

		.team-fensi-ul {
			display: flex;
			justify-content: space-between;

			.team-fensi-li {
				flex: 1;
				text-align: center;

				&.li-center {
					position: relative;

					&::before {
						position: absolute;
						left: 0;
						top: 0;
						bottom: 0;
						margin: auto;
						content: '';
						width: 0.02rem;
						height: 0.5rem;
						background: rgba(255, 255, 255, 0.2);
					}

					&::after {
						position: absolute;
						right: 0;
						top: 0;
						bottom: 0;
						margin: auto;
						content: '';
						width: 0.02rem;
						height: 0.5rem;
						background: rgba(255, 255, 255, 0.2);
					}
				}

				.team-fensi-val {
					height: 0.44rem;
					margin-bottom: 0.08rem;
					line-height: 0.44rem;
					font-weight: 500;
					font-size: 0.32rem;
				}

				.team-fensi-label {
					font-weight: 400;
					font-size: 0.24rem;
					opacity: 0.8;
				}
			}
		}
	}

	.team-static {
		width: 7.02rem;
		height: 2.52rem;
		margin: auto;
		border-radius: 0.16rem;
		background-color: #FFFFFF;
		overflow: hidden;

		.team-static-title {
			display: flex;
			align-items: center;
			height: 0.72rem;
			padding: 0 0.24rem;
			box-sizing: border-box;
			background-color: #f4f7fd;

			.team-static-title-icon {
				width: 0.32rem;
				height: 0.32rem;
				margin-right: 0.16rem;
			}

			.team-static-title-text {
				font-size: 0.28rem;
				font-weight: 500;
				color: #333333;
			}
		}

		.team-static-ul {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.team-static-li {
				flex: 1;
				margin-top: 0.4rem;
				text-align: center;

				.team-static-li-val {
					height: 0.44rem;
					margin-bottom: 0.16rem;
					line-height: 0.44rem;
					font-size: 0.32rem;
					font-weight: 500;
					color: #333333;
				}

				.team-static-li-label {
					height: 0.4rem;
					line-height: 0.4rem;
					font-size: 0.28rem;
					color: #666666;
				}
			}
		}
	}


}
</style>
